<template>
	<div>
		<div class="title">
			<span>{{title}}</span>
		</div>
		<p>商品名称<input type="text" v-model="obj.name"></p>
		<p>商品序号<input type="text" v-model="obj.sn"></p>
		<p>商品价格<input type="text" v-model="obj.price"></p>
		<p>商品厂商<input type="text" v-model="obj.author"></p>
		<p>商品出处<input type="text" v-model="obj.publisher"></p>
		<p>出厂时间<input type="date" v-model="tpublish"></p>
		<p>	商品类型
			<select v-model="obj.bookType.id">
				<option v-for="(item,index) in types" :key="index" :value="item.id">
					{{item.type}}
				</option>
			</select>
		</p>
		<p><img :src="`${$Imgurl}/showImg/${obj.picture}`">
		<input type="file" ref="pic" style="border: none;margin-left: 80px;"></p>
		<button @click="this.$router.push('/admin/bookscon')">返回列表</button>
		<button @click="update()">{{msg}}</button>
	</div>
</template>

<script>
	export default{
		name:'Bookup',
		data(){
			return{
				title:'',
				msg:"",
				obj:{
					author: '',
					bookType: {id: '', type: ""},
					favnum: '',
					id: 0,
					name: '',
					picture: '',
					price: 0,
					publisher: '',
					rate: 0,
					salenum:'',
					sn: '',
					tpublish: '2021-12-22',
				},
				types:[],
			}
		},
		methods:{
			update(){
				let that=this
				let fs=this.$refs.pic.files
				let fd=new FormData()
				if(fs.length>0 && fs[0]!=''){
					fd.append('pic',this.$refs.pic.files[0])
				}
				fd.append('id',this.obj.id)
				fd.append('name',this.obj.name)
				fd.append('sn',this.obj.sn)
				fd.append('author',this.obj.author)
				fd.append('publisher',this.obj.publisher)
				fd.append('tpublish',this.obj.tpublish)
				fd.append('bookType.id',this.obj.bookType.id)
				fd.append('picture',this.obj.picture)
				fd.append('price',this.obj.price)
				this.axios.post('/api/adm/book/addBook',fd).then( (res)=>{
					alert(res.data.msg)
					if(res.data.code===200){
						this.obj=res.data.data.book
						this.$router.push('/admin/bookscon')
					}
				} ).catch( (error)=>{
					console.log(error);
				} )
			}
		},
		computed:{
			tpublish:{
				get(){
					let d=new Date(this.obj.tpublish)
					let s=d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()
					return s
				},
				set(val){
					let d=new Date(val)
					this.obj.tpublish=d.getTime()
				}
			}
		},
		mounted() {
			let id=this.$route.query.bookup
			if(id==0 || id==''){
				this.title="商品添加"
				this.msg='添加'
			}else{
				this.axios.get('/api/adm/book/findById'+'/'+id).then( (res)=>{
					this.obj=res.data.data
				} ).catch( (error)=>{
					console.log(error);
				} )
				this.title="商品修改"
				this.msg='修改'
			}
			this.axios.get('/api/public/type/findAll').then( (res)=>{
				this.types=res.data.data
			} ).catch( (error)=>{
				console.log(error);
			} )
		}
	}
</script>

<style scoped>
	.title{
		margin-bottom: 5%;
	}
	.title span{
		font-size: 23px;
		margin: auto;
		text-indent: 1em;
		height: 50px;
		width: 90%;
		display: block;
		line-height: 50px;
		border-bottom: 2px solid gainsboro;
		font-weight: bold;
	}
	img{
		height: 100px;
		margin-top: 10px;
	}
	input[type='file']{
	}
	input{
		width: 400px;
		height: 30px;
		margin-top: 10px;
		margin-left: 25px;
		border-radius: 5px;
		border: 1px solid red;
		outline: none;
		text-indent: 1em;
	}
	select{
		width: 400px;
		height: 30px;
		margin-top: 10px;
		margin-left: 20px;
		border-radius: 5px;
		border: 1px solid red;
		outline: none;
		text-indent: 1em;
	}
</style>
